<template>
  <el-aside :width="width">
    <el-scrollbar>
      <el-menu
        :router="true"
        :default-active="$route.path"
        class="NavigationDefaultActive"
        mode="vertical"
      >
        <sidebarItem :items="menuData"></sidebarItem>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<script setup>
import sidebarItem from './SidebarItem.vue'
import { menu as menuData } from '@/menuConfig/menu';
console.log(menuData);

const props = defineProps(['width'])
</script>
<style scoped lang="scss">
.NavigationDefaultActive {
  height: 100%;
  overflow: hidden;
  overflow-y: scroll !important;
  @include scrollBar2;
}

// 去掉menu的边框，设置到scrollbar上
:deep(.el-scrollbar__wrap .el-menu) {
  border: none;
}
:deep(.el-scrollbar) {
  border-right: solid 1px var(--el-menu-border-color);
}
</style>